<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#regist').validate();
});
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#userid').blur(
			function(){
				var len = $(this).val().length ;
				if (len <4 || len > 16){
					$('#userid_msg').text('帳號長度不符合');
				}else
				{
					//*ajax
					$.ajax({
						url:"check.jsp?userid="+$(this).val(),
						cache:false,
						dataType:"html",
						
						success: function (html) {
							html = html.trim();
							if (html == "1"){
								$('#userid_msg').text('帳號己有人使用');
								//alert("sdgsgsgsgsg"); 
							}else{
								$('#userid_msg').text('此帳號可以使用');
							}
								
						}
					});
				}
				}
			);
		
		$('#pw1').blur(
			function(){
				var len = $(this).val().length ;
				if (len <4 || len > 20){
					$('#pw1_msg').text('密碼長度不符合');
				}
			}
		);
		$('#pw2').keyup(
			function(){
				var pw1 = $('#pw1').val();
				if (pw1!= $(this).val()){
					$('#pw2_msg').text('密碼不相同');
				}else{
					$('#pw2_msg').text('OK');
				}
			}
		);
		
	});

</script>
<title>Ajax測試</title>
</head>
<body>



<form action="" id="regist">
<table border=1 align=center width=600>
<tr>
<td align=center>帳號(*):</td>
<td><input id="userid" name="userid" type="text" value="jack" class="required"/><span id="userid_msg"></span></td>

</tr>
<tr>
<td align=center> 密碼(*):</td>
<td><input id="pw1" name="pw1" type="text" value="1234" class="required"/><span id="pw1_msg"></span></td>
</tr>
<tr>
<td align=center>密碼:</td>
<td><input id="pw2" name="pw2" type="text" value="1234"/><span id="pw2_msg">(請再輸入一次密碼)</span></td>

</tr>
<tr>
<td align=center>E-mail(*):</td>
<td><input name="email" type="text" value="test@com.tw" class="required email"/></td>
</tr>
<tr>
<td align=center>電話:</td>
<td><input name="tel01" tyoe="text" value="0987654321" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="註冊"/></td>
</tr>
</table>
  
  
<br/>
  
</form>
</body>
</html>